//导航类
class navC {

    http = 'http://localhost:3000';
    navli = document.querySelectorAll('.nav2');
    navspan = document.querySelectorAll('.nav2span');
    navli2 = document.querySelectorAll('.nav3');
    navspan2 = document.querySelectorAll('.nav2span1');
    fixed = document.querySelector('#fixed');
    body = document.querySelector('body');


    constructor() {
            // console.log(this.fixed);
            // console.log(this.body);
            // console.log(this.scrollTop);
            // console.log(this.navli, this.navspan);
            this.navli.forEach((ele, key) => {
                // console.log(ele, key);
                ele.onmouseover = this.liover.bind(this, key);

            })
            this.navli2.forEach((ele, key) => {
                // console.log(ele, key);
                ele.onmouseover = this.liover.bind(this, key);

            })



            //上栏导航滚动事件
            this.body.onscroll = this.bodyscroll;


        }
        //li移入事件

    liover(key) {

            this.spanhtml(key);
        }
        //向span中添加数据
    spanhtml(key) {
        //当鼠标移入第一个'居家生活'导航时获取的数据
        //向内容函数传入key和id值
        if (key == 0) this.content(key, 'home');
        if (key == 1) this.content(key, 'clothing');
        if (key == 2) this.content(key, 'cate');
        if (key == 3) this.content(key, 'clean');
        if (key == 4) this.content(key, 'baby');
        if (key == 5) this.content(key, 'sports');
        if (key == 6) this.content(key, 'wiring');
        if (key == 7) this.content(key, 'selection');





    }

    //二级菜单内容函数
    async content(key, id) {
        let res = await axios.get(this.http + '/' + id);
        let data = res.data;
        let html = '';
        // console.log(data);


        data.forEach((ele) => {
                // console.log(ele);
                html +=
                    `<div class="fload">
            <h4 class=".nav2h4">${ele.title}</h4>
        <ul >
        <li>${ele.labal}</li>
        <li>${ele.labal1}</li>
        <li>${ele.labal2}</li>
        <li>${ele.labal3}</li>
        <li>${ele.labal4}</li>
        <li>${ele.labal5}</li>
        </ul>
        </div>
        `
                this.navspan[key].innerHTML = html;
                this.navspan2[key].innerHTML = html;

            })
            //设置内容的宽度排列
        let fload = document.querySelectorAll('.fload');
        //求出数据的长度
        let floadss = data.length;
        //遍历数组,给每个fload设置宽度
        fload.forEach((e) => {

            // console.log(e);
            e.style.width = 1000 / floadss + 'px';
        })

    }

    //鼠标滚动事件
    bodyscroll() {
        //页面滚动监听导航
        let scrollTop = document.documentElement.scrollTop;
        // console.log(scrollTop);
        if (scrollTop > 180) {
            this.fixed.style.display = 'block';

        } else {
            this.fixed.style.display = 'none';

        }
    }


}
new navC();

//滚动
class cartoon {
    every = document.querySelector('.every2');
    every2lang = document.querySelectorAll('.new1child').length;
    btnleft = document.querySelector('.btnleft');
    btnright = document.querySelector('.btnright');
    constructor() {
        this.Interout();
        this.every.onmouseover = this.everyover.bind(this);
        this.every.onmouseout = this.everyout.bind(this);
        this.btnleft.onclick = this.leftclick.bind(this);
        this.btnright.onclick = this.rightclick.bind(this);
    }

    //定时器
    Interout() {
        let left = 0;
        let time;
        let cont = 0;
        // console.log(parseInt(this.every.style.left));
        this.info = false;

        time = setInterval(() => {
            this.every.style.transition = 'all 1s';

            if (this.info) {

                return;
            }
            cont++;
            left -= 1060;

            this.every.style.left = left + 'px';
            // console.log(left);

            if (cont == (this.every2lang - 12)) {

                cont = 0;
                left = 0;
                this.every.style.transition = 'none';
                this.every.style.left = 0;
            }



        }, 3000)



    }
    everyover(time) {
        this.info = true;

    }
    everyout() {

        this.info = false;
    }
    leftclick() {
        // this.every.style.left
        this.info = true;

        if (parseInt(this.every.style.left) < 0) {

            this.every.style.left = (parseInt(this.every.style.left) + 1040) + 'px'


        }


    }
    rightclick() {

        this.info = true;
        if (parseInt(this.every.style.left) > (this.every2lang - 13) * (-1040)) {

            this.every.style.left = (parseInt(this.every.style.left) - 1040) + 'px'
        }

    }


}
new cartoon();



//详情类
class comment {

    commentPL = document.querySelectorAll('.pinglun>div')
    commentspan = document.querySelectorAll('.xiangqing span');
    constructor() {

        // console.log(this.commentPL, this.commentspan);
        this.commentspan[0].onclick = this.span0.bind(this);
        this.commentspan[1].onclick = this.span1.bind(this);
        this.commentspan[2].onclick = this.span2.bind(this);


    }
    span0() {
        this.commentspan[0].style.background = 'white'
        this.commentspan[0].style.borderTop = '3px solid #f1bc0ef8';
        this.commentspan[1].style.background = 'none';
        this.commentspan[1].style.borderTop = 0;
        this.commentspan[2].style.background = 'none'
        this.commentspan[2].style.borderTop = 0;


        this.commentPL[0].style.display = 'block';
        this.commentPL[1].style.display = 'none';
        this.commentPL[2].style.display = 'none';
    }
    span1() {
        this.commentspan[1].style.background = 'white'
        this.commentspan[1].style.borderTop = '3px solid #f1bc0ef8';

        this.commentspan[2].style.background = 'none'
        this.commentspan[2].style.borderTop = 0;
        this.commentspan[0].style.background = 'none';
        this.commentspan[0].style.borderTop = 0;


        this.commentPL[1].style.display = 'block';
        this.commentPL[0].style.display = 'none';
        this.commentPL[2].style.display = 'none';
    }
    span2() {
        this.commentspan[2].style.background = 'white'
        this.commentspan[2].style.borderTop = '3px solid #f1bc0ef8';

        this.commentspan[1].style.background = 'none';
        this.commentspan[1].style.borderTop = 0;
        this.commentspan[0].style.background = 'none';
        this.commentspan[0].style.borderTop = 0;
        this.commentPL[2].style.display = 'block';
        this.commentPL[1].style.display = 'none';
        this.commentPL[0].style.display = 'none';
    }

}
new comment;


//数量加减

class mathjj {
    jian = document.querySelector('.jian');
    jia = document.querySelector('.jia');
    mathinput = document.querySelector('.mathinput');
    constructor() {
        // console.log(this.mathinput);
        // console.log(this.jia, this.jian);
        this.jian.onclick = this.jianclick.bind(this);
        this.jia.onclick = this.jiaclick.bind(this);
        this.mathinput.oninput = this.inputon.bind(this);

    }
    inputon() {
        // console.log(+this.mathinput.value);

        this.jianclick();

        this.jiaclick();
    }

    jianclick() {
        if (+this.mathinput.value > 1) {
            this.mathinput.value--;
        }
    }
    jiaclick() {

        this.mathinput.value++;
    }


}

new mathjj;


//商品规格

class message {
    messageh3 = document.querySelector('#messageh3');
    messagemany = document.querySelector('#messagemany');
    messageli = document.querySelectorAll('#messageul li');
    shoppingli=document.querySelector('.glyphicon-shopping');
    http = 'http://localhost:3000';
    arr = [];

    //获取加入购物车节点
    btnbuy = document.querySelector('#jiabtn');
    //获取加入购物车span
    buyspan = document.querySelector('#buyspan');
    //获取购物车界面的列表节点
   
    constructor() {
        // console.log(this.btnbuy);
        // console.log(this.messageh3, this.messagemany, this.messageli);
        // console.log(this.buyicon);
        this.messageli.forEach((i, k) => {

            // console.log(i, k);
            i.onclick = this.liclick.bind(this, i, k);

        });


        this.buyspan.onmouseover = this.buyover.bind(this);
        this.buyspan.onmouseleave = this.buyout.bind(this);
        this.shoppingli.onclick=this.shoppingliclick.bind(this)
   

        
        this.html2();
    }

    shoppingliclick(){
        this.buyspan.style.display = 'block';
        this.deldel();
    }

    liclick(i, k, eve) {
        //给每个li添加类
        i.classList.add('messageborder');
        //将点击过的k保存到arr中
        this.arr.push(k);
        //截取arr数组里除了最后一个点击的k
        let arr2 = this.arr.slice(0, this.arr.length - 1);
        //遍历arr2
        arr2.forEach((index) => {
                //将arr2中的k;删除类
                this.messageli[index].classList.remove('messageborder');

            })
            //重新给当前li添加类
        i.classList.add('messageborder');

        //   console.log(eve.target);

        this.html(k);
        this.btnbuy.onclick = this.buyclick.bind(this, k,i);
        
    }

    //内容更新
    async html(k) {
        let { data, status } = await axios.get(this.http + '/' + 'message');

        if (status == 200) {

            this.messageh3.innerHTML = data[k].title;
            this.messagemany.innerHTML = data[k].many;
        };




    }

    //加入购物车的绑定事件
    async buyclick(k,i) {
        // console.log(data,status,k);
        // console.log(111);
        // console.log(evet.target.nodeName);
        // console.log(m,t);




        let { data, status } = await axios.get(this.http + '/' + 'message');

        // console.log(data,status);
        let title=data[k].title,
        many=data[k].many,
        math=k+1,
        src=i.firstElementChild.getAttribute('src');
   
     
      axios.post(this.http+'/'+'shopping',{
        title,
        many,
        math,
        src
      }).then((res)=>{

        console.log(res);
        this.buyspan.style.display = 'block';
        if (status == 200) {


            this.buyspan.innerHTML += `
      
        
        <div style="display: flex;height: 50px;" id="${res.data.id}">

        <p><img src="./img/index${k}.webp" alt="" style="width: 50px;">
        </p>
        <p style="display: flex;flex-direction: column;font-size: 10px;margin-left: 10px;justify-content: center;margin-top: 10px;">
            <span class="buy1">${res.data.title}</span>
            <span style="color: #aaa7a7;margin-top: 5px;" >规格<span class="buy2">${k+1}</span>X<span>1</span>
            </span>
        </p>
    <p style="margin-left: 10px;color: red;margin-top: 10px;" >￥${res.data.many}</p>
    <span class="glyphicon glyphicon-remove" style="color: #aaa7a7;margin-left: 10px;margin-top: 10px;"></span>
     </div>
               
        `;
           
        };

       this.deldel();

      });

    

        // this.html(k,evet.target);

        clearTimeout(this.time)
        this.time = setTimeout(() => {

            this.buyspan.style.display = 'none';
        }, 3000);
       


        // console.log(time);

    };
//删除小购物车商品信息
deldel(){

  //获取span删除键
  let del = document.querySelectorAll('.glyphicon-remove');

  // console.log(del);
  //给删除键绑定点击事件
  del.forEach((ele) => {

      ele.onclick = function(eve) {
          // console.log(11);
      let delparent = eve.target.parentNode;
        //  console.log(111);
         //  console.log(delparent.id);

         axios.delete('http://localhost:3000'+'/'+'shopping'+'/'+delparent.id).then(()=>{

             delparent.remove();


         })




      }

  })


    
}


    //span移入事件
    buyover() {

        clearTimeout(this.time)

    }
    buyout() {
        this.buyspan.style.display = 'none';
        // console.log(41);


    }
//已存的span内容

  async  html2(){
    let { data, status } = await axios.get(this.http + '/' + 'shopping');
    // console.log(data);
    if (status == 200) {

        data.forEach((i,k)=>{

            this.buyspan.innerHTML += `
  
    
            <div style="display: flex;height: 50px;" id="${data[k].id}">
        
            <p><img src="./img/index${k}.webp" alt="" style="width: 50px;">
            </p>
            <p style="display: flex;flex-direction: column;font-size: 10px;margin-left: 10px;justify-content: center;margin-top: 10px;">
                <span class="buy1">${data[k].title}</span>
                <span style="color: #aaa7a7;margin-top: 5px;" >规格<span class="buy2">${k+1}</span>X<span>1</span>
                </span>
            </p>
        <p style="margin-left: 10px;color: red;margin-top: 10px;" >${data[k].many}</p>
        <span class="glyphicon glyphicon-remove" style="color: #aaa7a7;margin-left: 10px;margin-top: 10px;"></span>
         </div>
                   
            `;

        })
     
    }
   

    }
   


}

new message;


//放大器图片切换
class cut {
    fdjli = document.querySelectorAll('#fDJ li');
    small = document.querySelector('#small img');
    big = document.querySelector('#big img')
    arr = [];
    constructor() {
        this.fdjli.forEach((i, k) => {

            i.onclick = this.liclick.bind(this, i, k);
        });
    }

    liclick(i, k) {
        //给每个li添加类
        i.classList.add('messageborder');
        //将点击过的k保存到arr中
        this.small.src = `./img/index${k}.webp`;
        // console.log(this.small);
        this.big.src = `./img/index${k}.webp`;
        this.arr.push(k);
        //截取arr数组里除了最后一个点击的k
        let arr2 = this.arr.slice(0, this.arr.length - 1);
        //遍历arr2
        arr2.forEach((index) => {
                //将arr2中的k;删除类
                this.fdjli[index].classList.remove('messageborder');

            })
            //重新给当前li添加类
        i.classList.add('messageborder');

        this.html(k);
    }


}
new cut;

//跳转

class skip{
    new=document.querySelectorAll('.new1child');
    a=document.querySelectorAll('.nav2');
    shoppingA=document.querySelector('.shoppingA');
   
    constructor(){

        this.shoppingA.onclick=function(){

            if(!(localStorage.getItem('login')-0)){
                location.assign('./login.html');

            }else{
            location.assign('./shoping.html');

            }

        }
        this.a.forEach((i)=>{
            i.onclick=function(){
                
                location.assign('./browse.html');

            }

        })

        this.new.forEach((i)=>{
            i.onclick=function(){
                
                location.assign('./details.html');

            }

        })

      

    }





}
new skip();